<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01弹性盒</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            line-height: 100px;
            /* 
            flex-direction:指定容器中弹性元素的排列方式
                可选值：
                    row 默认值，弹性元素在容器中水平排列（从左到右）
                    row-reverse 水平反向排列（从右向左）
                    column 弹性元素纵向排列（从上到下）
                    column-reverse 纵向反向排列（从下到上）
                主轴：
                    弹性元素的排列方向称为主轴，从左向右什么的
                侧轴：与主轴的垂直方向的轴
            */
            flex-direction: column;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            /* float: left; */
            /* 弹性元素的属性
                flex-grow 指定弹性元素的伸展系数
                    当父元素有多余空间时，子元素如何伸展
                    父元素的剩余空间，会按照比例进行分配
                    0表示不伸展，数字越大表示拉伸得越多
                flex-shrink 指定弹性元素的收缩系数
                    当父元素中的空间不足以容纳所有的子元素时，对子元素进行收缩
                    系数越大，收缩得越多

            */
            /* flex-shrink: ; */
        }
        li:nth-child(2){
            background-color: pink;
        }
        li:nth-child(3){
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 
        flex(弹性盒、伸缩盒)
            -是css中的又一种布局手段，它主要用来代替浮动来完成页面布局
            -flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
            -弹性容器：
                要使用弹性盒，必须先将一个元素设置为弹性容器
                通过display设置弹性容器
                    display:flex    块级弹性容器-比较常用
                    display:inline-flex 行内弹性容器
            -弹性元素：
                弹性容器的 子 元素叫弹性元素也叫做弹性项，后代元素不会成为弹性元素
                一个元素可以是弹性容器也可以是弹性元素

     -->
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
     </ul>
</body>
</html>